<template>
	<view class="content">
		<view class="detail">
			<view class="head">
				<view class="user">
					<view class="left">
						<!--						<image src="http://sni1muz85.hd-bkt.clouddn.com/img/my/avatar.jpeg"></image>-->
						<image :src="data.img"></image>

					</view>
					<view class="right">
						<view class="line">
							<view class="left">
								<view class="name">{{data.name}}</view>
								<view class="time">{{data.createTime}}</view>
							</view>
							<view class="right">{{distance?"":distance}}</view>
						</view>
					</view>
				</view>

				<view class="line">
					<view class="left">
						<view class="title">加微：</view>
						<view class="text">{{data.wxNumber}}</view>
					</view>
					<view class="btn" @click="copy">复制</view>
				</view>
				<view class="line">
					<view class="left">
						<view class="title">手机号：</view>
						<view class="text">{{data.mobile}}</view>
					</view>
					<view class="btn" @click="call">拨打</view>
				</view>
				<view class="line">
					<view class="left">
						<view class="title">地址：</view>
						<view class="text">{{data.addr}}</view>
					</view>
					<view class="btn" style="background-color: #149CFF;" @click="mapFun">导航</view>

				</view>
				<view class="line">
					<view class="left">
						<view class="title">有效期：</view>
						<view class="">{{data.startDate}} 至 {{data.endDate}}</view>
					</view>
				</view>
				<view style="width: 92vw; border-bottom: 1rpx solid #8A8A8A; margin-top: 20rpx"></view>
			</view>
			<view class="box">
				<text>{{data.content?data.content:""}}</text>
			</view>
			<view class="imgList" v-for="(item, index) in imgList" :key="index">
				<image :src="item" mode="widthFix" @load="loadImage($event,item)" :style="{'height':imgheight+'rpx' }"
					@click="enlargePicture(item)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},

		data() {
			return {
				imgheight: 0,
				watchImgShow: false,
				imgUrl: '',
				imgList: [

				],
				id: null,
				data: {},
				distance: ""
			}
		},
		onLoad(res) {
			this.initData(res.id)
			this.distance = res.disName
		},
		show() {
			this.initData()
		},
		methods: {
			loadImage(event, item) {
				console.log(event)
				console.log(item)
				this.imgheight = event.detail.height
			},
			initData(id) {
				this.$api.request({
					url: this.$api.activityInfo + id
				}).then(res => {
					this.data = res.data
					this.imgList = JSON.parse(res.data.imgList)
				})
			},
			mapFun() {
				let that = this
				uni.openLocation({
					latitude: Number(that.data.lat), //纬度 - 目的地/坐标点
					longitude: Number(that.data.longitude), //经度 - 目的地/坐标点
					name: that.data.name,
					address: that.data.addr
				})
			},
			call() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: that.data.mobile
				});
			},
			// 查看图片
			enlargePicture(index) {
				// let photoList = this.imgList.map(item => {
				// 	return item.url;
				// });
				uni.previewImage({
					current: index,
					urls: [index]
				});
			},
			copy() {
				let that = this
				uni.setClipboardData({
					data: that.data.wxNumber,
					success: function() {
						console.log('success');
					}
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	@import "@/static/css/app.less";

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-color: #fff;

		.detail {
			width: 658rpx;

			.head {
				width: 100%;
				display: flex;
				flex-direction: column;

				.user {
					display: flex;
					margin-top: 50rpx;

					.left {
						margin-right: 20rpx;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: @radius;
						}
					}

					.right {
						.line {
							width: 550rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin: 0;

							.left {
								display: flex;
								flex-direction: column;
								color: #1A1A1A;

								.name {
									width: 300rpx;
									font-size: 32rpx;
									word-wrap: break-word;
									// margin-top: 10rpx;
									//overflow: hidden;
									//text-overflow: ellipsis;
									//white-space: nowrap;
								}

								.time {
									font-size: 28rpx;
									margin-top: 10rpx;
								}
							}

							.right {
								font-size: 32rpx;
								color: #8A8A8A;
							}
						}
					}
				}

				.line {
					display: flex;
					// justify-content: space-between;
					align-items: center;
					margin-top: 25rpx;

					.left {
						display: flex;
						font-size: 28rpx;

						.title {
							width: 140rpx;
							color: #8A8A8A;
						}

						.text {
							max-width: 370rpx;
							margin-right: 20rpx;
							//overflow: hidden;
							word-wrap: break-word;

							//text-overflow: ellipsis;
							//white-space: nowrap;
						}
					}

					.btn {
						font-size: 28rpx;
						color: #fff;
						background-color: #07C160;
						border-radius: 8rpx;
						padding: 10rpx 20rpx;
					}
				}
			}

			.box {
				font-size: 32rpx;
				border-radius: 20rpx;
				padding: 22rpx 0;
				color: #1A1A1A;
			}

			.imgList {
				// margin-top: 30rpx;

				image {
					width: 658rpx;
					// margin-bottom: 12rpx;
				}
			}
		}
	}
</style>